<template>
  <div id="alarm-week-charts" style="width:100%;height:100%"></div>
</template>

<script>
import * as echarts from 'echarts'
import { alarmTrendApi } from '@/api/'

export default {
  name: 'alarm-week-charts',
  data() {
    return {
      myChart: null,
      data: {
        x: [],
        y: []
      },
    }
  },
  methods: {
    resize() {
      if (this.myChart) {
        this.myChart.resize()
      }
    },
    loadRes() {
      // 初始化 echarts 对象
      const myChart = echarts.init(document.getElementById('alarm-week-charts'))
      // 定义饼图配置项
      const option = {
        tooltip: {
          trigger: 'axis',
          // axisPointer: {
          //   type: 'cross',
          //   crossStyle: {
          //     color: '#999'
          //   }
          // }
        },
        legend: {
          data: ['低风险', '中风险', '高风险'],
          selectedMode: false,
          textStyle: {
            color: '#f7f7f7'
          }
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#18466b', // 设置坐标轴颜色
            }
          },
          axisLabel: {
            show: true,
            color: '#ffffff',
            fontSize: 10,
            // formatter: (row) => {
            //   const arr = row.split('-').filter((v,i) => i > 0)
            //   return arr.join('-');
            // }
          },
          data: this.data.x
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            color: '#ffffff',
            fontSize: 10
          },
          splitLine: {
            // 网格线
            show: true,
            lineStyle: { //分割线
              color: '#11324d',
              width: 1,
              type: 'solid' //dotted：虚线 solid:实线
            }
          },
        },
        grid: {
          left: 30,
          right: 0,
          top: 40,
          bottom: 20
        },
        series: [
          {
            data: this.data.y[0],
            type: 'line',
            color: '#FF7734',
            name: '低风险'
          }, 
          {
            data: this.data.y[1],
            type: 'line',
            color: '#20A6FF',
            name: '中风险'
          }, {
            data: this.data.y[2],
            type: 'line',
            color: '#66E1DF',
            name: '高风险'
          }
        ]
      }
      // 将配置项应用于图表上
      myChart.setOption(option)
      this.myChart = myChart
    },
    load(eventLevel) {
      return alarmTrendApi({ eventLevel })
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resize.bind(this))
  },
  mounted() {
    const arr = [this.load(1), this.load(2), this.load(3)]
    Promise.all(arr).then(res => {
      const obj = {
        low: res[0].data.data,
        middle: res[1].data.data,
        high: res[2].data.data
      }
      this.data = {
        x: obj.low.reduce((a, v) => [...a, v.day], []),
        y: [
          obj.low.reduce((a, v) => [...a, v.num], []),
          obj.middle.reduce((a, v) => [...a, v.num], []),
          obj.high.reduce((a, v) => [...a, v.num], []),
        ]
      }
      this.$nextTick(() => {
        this.loadRes()
        window.addEventListener('resize', this.resize.bind(this))
      })
    })
  },
}
</script>

<style lang="scss" scoped>
.alarm-week-charts {
  width: 100%;
  height: 2.1rem;
  position: relative;
  .unit {
    color: #fff;
    font-size: 10px;
    position: absolute;
    left: 0;
    top: 0;
    line-height: 1.1;
    // text-align: right;
  }
}
</style>